<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page import="java.util.*,com.sunelec.pojo.*" %>
<!doctype html>
<html lang="en">
<head>
    <title>电站信息中心</title>
    <meta name="renderer" content="webkit" />
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link href="${pageContext.request.contextPath}/static/css/font-awesome.css" rel="stylesheet" />
    <link href="${pageContext.request.contextPath}/static/css/bootstrap.min.css" rel="stylesheet" />
    <link href="${pageContext.request.contextPath}/static/css/informationCenter.css" rel="stylesheet" />
    <script src="${pageContext.request.contextPath}/static/js/jquery.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/js/bootstrap.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/js/echarts.js"></script>
    <script src="${pageContext.request.contextPath}/static/js/informationCenter.js"></script>
</head>
<style>
    .lineHigh1{
        position: relative;
        top:20px;
    }
    .lineHigh{
        position: relative;
        top:25px;
    }
</style>
<script>
    $(document).ready(function(){
        odd= {"background":"white"};//奇数样式
        even={"background":"#EDD9B1"};//偶数样式
        odd_even("#dataTable",odd,even);
    });
    function odd_even(id,odd,even) {
        $(id).find("tr").each(function (index, element) {
            if (index % 2 == 1)
                $(this).css(odd);
            else
                $(this).css(even);
        });
    }
</script>

<body>
<div class="top">
    <div class="top-left">
        <div class="kong"></div>
        <div class="logo">
            <img src="${pageContext.request.contextPath}/static/imgs/logo3.png">
        </div>
    </div>
    <div class="top-right">
        <ul class="list">
            <li><a href="${pageContext.request.contextPath}/powerCenter.action?username=${username}">电站中心</a></li>
            <li><a href="checkCenter.jsp">运维中心</a></li>
            <li><a href="${pageContext.request.contextPath}/InReportCenter">报表中心</a></li>
            <li><a href="${pageContext.request.contextPath}/centralizedControl?powerCenter=${powerCenter}">展示中心</a></li>
            <% if(session.getAttribute("users")!=null){
                Users users = (Users)session.getAttribute("users");
            %>
                <% if(users.getType()==1){%>
                    <li><a href="${pageContext.request.contextPath}/InidManage">账号管理</a></li>
                <% }%>
            <% } %>
            <li><a href="${pageContext.request.contextPath}/checkOut.action" ><span class="fa fa-user"></span></a></li>
        </ul>
    </div>
</div>
<div class="main">
    <div class="center">
        <div class="block1">
            <div class="content">
                <div class="title">
                    <span>电站中心</span>
                </div>
                <div class="detail">
                    <div class="box">
                        <div class="num">
                            <span>${powerCenter.current_power}</span>
                        </div>
                        <div class="text">
                            <span>当前功率 (kW)</span>
                        </div>
                    </div>
                    <div class="box">
                        <div class="num">
                            <span>${powerCenter.installCapacity}</span>
                        </div>
                        <div class="text">
                            <span>总装机容量 (kW)</span>
                        </div>
                    </div>
                    <div class="box">
                        <div class="num">
                            <span>${powerCenter.daily_elec}</span>
                        </div>
                        <div class="text">
                            <span>日发电量 (kWh)</span>
                        </div>
                    </div>
                    <div class="box">
                        <div class="num">
                            <span>${powerCenter.month_elec}</span>
                        </div>
                        <div class="text">
                            <span>月发电量 (kWh)</span>
                        </div>
                    </div>
                    <div class="box">
                        <div class="num">
                            <span>${powerCenter.year_elec}</span>
                        </div>
                        <div class="text">
                            <span>年发电量 (kWh)</span>
                        </div>
                    </div>

                    <div class="box">
                        <div class="num">
                            <span>${powerCenter.all_elec}</span>
                        </div>
                        <div class="text">
                            <span>累计发电量 (kWh)</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="block2">
            <div class="content">
                <div class="state">
                    <div class="box boxL">
                        <div class="title">
                            <span>电站状态</span>
                        </div>
                        <div class="img">
                            <img src="${pageContext.request.contextPath}/static/imgs/infor2.png">
                        </div>
                    </div>
                    <div class="box boxR">
                        <div class="detail">
                            <div>电站总数：${powerCenter.runing_num}（个）</div>
                            <div>正常数量：${powerCenter.runing_normal}（个）</div>
                            <div>离线数量：${powerCenter.runing_excpetion} （个）</div>
                            <div>报警数量：${powerCenter.runing_warning} （个）</div>
                        </div>
                    </div>
                </div>
                <div class="contribute">
                    <div class="box boxL">
                        <div class="title">
                            <span>社会贡献</span>
                        </div>
                        <div class="img">
                            <img src="${pageContext.request.contextPath}/static/imgs/timg.jpg" >
                        </div>
                    </div>
                    <div class="box boxR">
                        <div class="detail">
                            <div>减少CO2排放：${powerCenter.co2}t</div>
                            <div>减少SO2排放：${powerCenter.so2}t</div>
                            <div>绿植增加量：${powerCenter.tree}棵</div>
                            <div></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="block3">
            <div class="list">
                <form>
                    <div class="title">电站列表</div>
                    <div class="listTitle">
                        <div class="submit"><a onClick="onSubmitVote()" id="watch">点击查看对比数据</a></div>
                        <div class="add"><a href="${pageContext.request.contextPath}/addStation.html"><i class="fa fa-plus-square"></i>&nbsp;增加电站</a></div><p>${add_message}</p>
                    </div>
                    <div class="listContent">
                        <table class="table table-bordered" id="dataTable">
                            <tr class="title">
                                <td>勾选对比项</td>
                                <td>电站名称</td>
                                <td>电站地址</td>
                                <td>电站状态</td>
                                <td>装机容量(kW)</td>
                                <td>业主信息</td>
                                <td>发电功率(kW)</td>
                                <td>当日发电量(kW)</td>
                                <td>当日发电趋势</td>
                                <td>更新时间</td>
                                <td>查看电站信息</td>
                                <td>编辑电站信息</td>
                            </tr>
                            <%List list = (List)session.getAttribute("powerLists");
                                if(list!=null&&list.size()!=0){
                                for(int i=1;i<list.size();i++){
                                     PowerList powerList = (PowerList)list.get(i);
                            %>
                            <tr>
                                <td class="lineHigh1"><input name="name" type="checkbox" value="<%=powerList.getPowerId() %>" onClick="onCheckBox(this)" /></td>
                                <td class="lineHigh"><span><%=powerList.getPowerName() %></span></td>
                                <td class="lineHigh"><div class="location" title=<%=powerList.getPowerLocal() %>><span><%=powerList.getPowerLocal() %></span></div></td>
                                <td class="lineHigh"><span><%=powerList.getRuning_id() %></span></td>
                                <td class="lineHigh"><span><%=powerList.getInstallCapacity() %></span></td>
                                <td class="lineHigh"><div class="userData" title=<%=powerList.getUserInfo() %>><span><%=powerList.getUserInfo() %></span></div></td>
                                <td class="lineHigh"><span><%=powerList.getCurrent_power() %></span></td>
                                <td class="lineHigh"><span><%=powerList.getDaily_electricity() %></span></td>
                                <td class="tdRow" id="tendency+<%=i%>" style="width:160px;height: 97px;">
                                    <script type="text/javascript">
                                        var myChart=echarts.init(document.getElementById('tendency+<%=i%>' ));
                                        option = {
                                            xAxis: {
                                                type: 'category',
                                                data: ['0',  '4', '8', '12', '16', '20'],
                                                axisLable:{
                                                    interval:0,
                                                    margin:5,
                                                    textStyle:{
                                                        fontSize:9
                                                    }
                                                }
                                            },
                                            tooltip:{
                                                trigger: 'axis',
                                            },
                                            yAxis: {
                                                axisLabel:{
                                                    formatter: function(){
                                                        return "";
                                                    }
                                                }
                                            },

                                            series: [{
                                                data: <%=powerList.getJsonarray() %>,
                                                type: 'line'
                                            }]
                                        };
                                        myChart.setOption(option);
                                    </script>
                                </td>
                                <td class="lineHigh"><span><%=powerList.getUpdate_date() %></span></td>
                                <td class="lineHigh">
                                    <a href="ShowPowerInfo.html?powerId=<%=powerList.getPowerId() %>">详情</a>
                                </td>
                                <td class="lineHigh">
                                    <a href="edictPowerInformation.html?powerId=<%=powerList.getPowerId() %>"><i class="fa fa-edit"></i></a>
                                </td>
                            </tr>
                            <%      }
                                } %>
                        </table>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
</body>
</html>
